<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
  <style>
    .topic {
      display: flex;
      align-items: center;
    }
    .title {
      margin: 0;
    }
    .topic .label {
      margin: 0 10px;
    }
    .topic-detail {
      flex: 1;
    }

    .topic-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
    .nav-pills a {
      padding: 5px 10px !important;
    }
    .panel {
      position: relative;
    }
    .list-group {
      min-height: 500px;
    }
    .loading {
      z-index: 10;
      position: absolute;
      top: 51px;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.5);
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <ul class="nav nav-pills">
            <li class="active"><a href="#">全部</a></li>
            <li><a href="#">精华</a></li>
            <li><a href="#">分享</a></li>
            <li><a href="#">问答</a></li>
            <li><a href="#">招聘</a></li>
          </ul>
        </div>
     
          
        <div class="loading text-center"  v-if="loading">
          <img src="./loading.gif" alt="">
        </div>

        <ul class="list-group">
          <li class="list-group-item topic"
            v-for="topic in topics">
            <img width="30" height="30" :src="topic.author.avatar_url" alt="">

            <span class="label label-success" v-if="topic.top">置顶</span>

            <span class="label label-info" v-else>{{topic.tab | formatTab}}</span>

            <div class="topic-detail">
              <p class="title">{{topic.title | formatTitile}}</p>
              <div class="topic-info">
                <div class="count">
                  <span class="reply_count text-danger">{{topic.reply_count}}</span> / <span class="visit_count">{{topic.visit_count}}</span>
                </div>
                <time class="text-muted">{{topic.last_reply_at | formatTime}}</time>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <nav class="text-center">
      <ul class="pagination">
        <li v-if="currentPage === 1" class="disabled"><a href="#"><span>&laquo;</span></a></li>
        <li v-else @click="setCurrentPage(currentPage - 1)"><a href="#"><span>&laquo;</span></a></li>
        
        <li @click="setCurrentPage(page)" :class="{active: page === currentPage}" v-for="page in 10"><a href="#">{{page}}</a></li>

        <li class="disabled" v-if="currentPage === 10"><a href="#"><span>&raquo;</span></a></li>
        <li @click="setCurrentPage(currentPage + 1)" v-else><a href="#"><span>&raquo;</span></a></li>
      </ul>
    </nav>
  </div>
  <script src="./axios.min.js"></script>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        topics: [],
        loading: true,
        currentPage: 1
      },
      methods: {
        setCurrentPage (page) {
          this.currentPage = page
          // 发起新的请求，获取新的数据
          this.getTopics(page)
        },
        getTopics (page=1) {
          // page = page || 1
          this.loading = true
          // this.topics = []
          axios.get('https://cnodejs.org/api/v1/topics', {
            params: {
              page,
              limit: 10,
              // tab: 'dev'
            }
          }).then(res => {
            this.topics = res.data.data
            this.loading = false
          })
        }
      },
      filters: {
        // 可以给对应添加过滤器的值执行对应的过滤操作
        formatTab (value) {
          // {{value === 'good' ? '精华' : value === 'share' ? '分享' : value === 'ask' ? '问答': '招聘'}}
          // console.log(value)
          return value === 'good' ? '精华' : value === 'share' ? '分享' : value === 'ask' ? '问答':  value === 'job' ? '招聘' : '测试'
        },
        formatTitile (value) {
          return value.length > 50 ? value.slice(0, 51) + '…' : value
        },
        formatTime (value) {
          const d = new Date(value)
          const time = d.getTime()
          const t = (Date.now() - time) / 1000 // 时间差
          const arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

          return t < 60 ? Math.floor(t) + "秒前" : t / 60 < 60 ? Math.floor(t / 60) + '分钟前' : t / 60 / 60 < 24 ? Math.floor(t / 60 / 60) + '小时前' : d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()
        }
      },
      created () {
        this.getTopics()
      }
    })
  </script>
</body>
</html>